<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
    <div id="app" style="text-align: center">
        <h3>用户列表展示</h3>
        <table border="1px" align="center" cellspacing="0px" width="80%">
            <tr>
                <td>序号</td>
                <td>用户名</td>
                <td>密码</td>
                <td>性别</td>
                <td>邮箱</td>
                <td>年龄</td>
                <td>爱好</td>
            </tr>
            <tr v-for="(user,index) of users">
                <td>{{index+1}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.gender==1?"男":"女"}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
                <td>{{user.hobbies}}</td>
            </tr>
        </table>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[]
        },
        created:function(){
            //发送请求  找服务器要数据

            axios.get("/user/list")
                .then((response)=>{
                    let users=response.data;
                    console.log("服务器端响应的数据:");
                    console.log(users);

                    this.users=users;
            });



        }


    })




</script>
</body>
</html>